<template>
  <el-dialog
    :title="data.titleMap[data.type - 1]"
    :width="800"
    v-model="data.visible"
  >
    <template v-if="data.type == 1">
      <div class="net-user-select">
        <div class="net-user-select-left">
          <div class="net-user-search">
            <el-input
              v-model="data.search.searchText"
              prefix-icon="el-icon-search"
              placeholder="搜索成员"
            >
              <template #append>
                <el-button icon="el-icon-search"></el-button>
              </template>
            </el-input>
          </div>
          <div class="net-user-dept">
            <div class="net-user-dept-tree">
              <el-scrollbar>
                <el-tree
                  class="menu"
                  highlight-current
                  :data="data.deptTrees"
                  node-key="id"
                  @node-click="queryUser"
                />
              </el-scrollbar>
            </div>
            <div class="net-user-user-tree">
              <el-main class="nopadding">
                <scTable
                  ref="table"
                  :apiObj="userDeptApi.getAllUserListOfDeptId"
                  row-key="id"
                  stripe
                  :paginationLayout="data.paginationLayout"
                  :hideDo="true"
                  @select="selectOne"
                >
                  <el-table-column
                    type="selection"
                    width="50"
                  ></el-table-column>
                  <el-table-column
                    label="姓名"
                    prop="Name"
                    width="100"
                  ></el-table-column>
                </scTable>
              </el-main>
            </div>
          </div>
        </div>
        <div class="net-user-select-icon">
          <el-icon><el-icon-arrow-right /></el-icon>
        </div>
        <div class="net-user-select-right">
          <header>已选({{ data.selected.length }})</header>
          <ul>
            <el-scrollbar>
              <li v-for="(item, index) in data.selected" :key="item.Id">
                <span class="name">
                  <el-avatar size="small">
                    {{ item.Name.substring(0, 1) }}
                  </el-avatar>
                  <label>{{ item.Name }}</label>
                </span>
                <span class="delete">
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    size="small"
                    @click="deleteSelected(index, item.Id)"
                  ></el-button>
                </span>
                <!-- <span class="delete">
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    size="small"
                  ></el-button>
                </span> -->
              </li>
            </el-scrollbar>
          </ul>
        </div>
      </div>
    </template>
    <template v-if="data.type == 2">
      <div class="net-user-select">
        <div class="net-user-select-left">
          <div class="net-user-search">
            <el-input
              v-model="data.search.searchText"
              prefix-icon="el-icon-search"
              placeholder="搜索角色"
            >
              <template #append>
                <el-button icon="el-icon-search"></el-button>
              </template>
            </el-input>
          </div>
          <div class="net-user-dept">
            <div class="net-user-dept-tree">
              <el-scrollbar>
                <el-tree
                  class="menu"
                  highlight-current
                  :data="data.deptTrees"
                  node-key="id"
                  @node-click="queryRole"
                />
              </el-scrollbar>
            </div>
            <div class="net-user-user-tree">
              <el-main class="nopadding">
                <scTable
                  ref="table"
                  :apiObj="roleDeptApi.getAllRoleListOfDeptId"
                  row-key="id"
                  stripe
                  :paginationLayout="data.paginationLayout"
                  :hideDo="true"
                  @select="selectOneRole"
                >
                  <el-table-column
                    type="selection"
                    width="50"
                  ></el-table-column>
                  <el-table-column
                    label="角色名称"
                    prop="Name"
                    width="100"
                  ></el-table-column>
                </scTable>
              </el-main>
            </div>
          </div>
        </div>
        <div class="net-user-select-icon">
          <el-icon><el-icon-arrow-right /></el-icon>
        </div>
        <div class="net-user-select-right">
          <header>已选({{ data.selectedRole.length }})</header>
          <ul>
            <el-scrollbar>
              <li v-for="(item, index) in data.selectedRole" :key="item.Id">
                <span class="name">
                  <el-avatar size="small">
                    {{ item.Name.substring(0, 1) }}
                  </el-avatar>
                  <label>{{ item.Name }}</label>
                </span>
                <span class="delete">
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    size="small"
                    @click="deleteSelectedRole(index, item.Id)"
                  ></el-button>
                </span>
                <!-- <span class="delete">
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    size="small"
                  ></el-button>
                </span> -->
              </li>
            </el-scrollbar>
          </ul>
        </div>
      </div>
    </template>
    <template #footer>
      <el-button @click="data.visible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 认</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
//TODO 为图省事,获取部门树接口我写死了，如果想做成配置化的，可以在前端写配置文件，读取接口地址
import deptApi from '@/api/dept/index';
import userDeptApi from '@/api/Framework/userDept/index';
import roleDeptApi from '@/api/Framework/roleDept/index';
import { reactive, ref, watch, nextTick } from 'vue';
import scTable from '@/components/scTable/index.vue';
import { ElMessageBox, ElMessage, ElLoading } from 'element-plus';
let table = ref('');
const emit = defineEmits(['selectedEmit']);
const data = reactive<any>({
  mode: 'add',
  type: 2,
  titleMap: ['人员选择', '角色选择'],
  visible: false,
  search: {
    searchText: '',
  },
  deptTrees: [],
  userTrees: [],
  userProp: {
    label: 'Name',
  },
  paginationLayout: 'prev,next',
  checkDeptId: '',
  userPage: {
    total: 1,
    pageSize: 1,
    currentPage: 1,
  },
  selectedRole: [],
  //已经选择的数据
  selected: [],
  queryUserListOfDeptIdDto: {},
  emitData: {
    selectedUser: [],
    selectedRole: [],
  },
});
const selectOne = (selection: any, row: any) => {
  if (
    selection.length > 0 &&
    JSON.stringify(data.selected).indexOf(JSON.stringify(row)) == -1
  ) {
    data.selected.push(row);
  } else if (selection.length == 0) {
    data.selected = data.selected.filter((item: any) => item.Id != row.Id);
  }
};
const selectOneRole = (selection: any, row: any) => {
  if (
    selection.length > 0 &&
    JSON.stringify(data.selectedRole).indexOf(JSON.stringify(row)) == -1
  ) {
    data.selectedRole.push(row);
  } else if (selection.length == 0) {
    data.selectedRole = data.selectedRole.filter(
      (item: any) => item.Id != row.Id
    );
  }
};
const open = (type: number) => {
  data.visible = true;
  data.type = type;
};
const getDeptTrees = async () => {
  var res = await deptApi.getDeptTrees.get();
  if (res == null) {
    ElMessage.warning('获取部门树的接口异常!请联系管理员!');
  } else {
    data.deptTrees = res.data;
  }
};
const queryUser = async (data: any, node: any) => {
  let isHaveChildren = false;
  if (node.childNodes.length <= 0) {
    isHaveChildren = false;
  } else {
    isHaveChildren = true;
  }

  data.queryUserListOfDeptIdDto = {
    deptId: data.id,
    isHaveChildren: isHaveChildren,
  };
  (table.value as any).reload(data.queryUserListOfDeptIdDto);
};
const queryRole = async (data: any, node: any) => {
  let isHaveChildren = false;
  if (node.childNodes.length <= 0) {
    isHaveChildren = false;
  } else {
    isHaveChildren = true;
  }

  data.queryRoleListOfDeptIdDto = {
    deptId: data.id,
    isHaveChildren: isHaveChildren,
  };
  (table.value as any).reload(data.queryRoleListOfDeptIdDto);
};
//删除已选
const deleteSelected = (index: any, id: any) => {
  data.selected.splice(index, 1);
  let tableValue = table.value as any;
  var current = tableValue.tableData.filter((s: any) => s.Id == id)[0];
  tableValue.toggleRowSelection(current, false);
};
//删除已选
const deleteSelectedRole = (index: any, id: any) => {
  data.selectedRole.splice(index, 1);
  let tableValue = table.value as any;
  var current = tableValue.tableData.filter((s: any) => s.Id == id)[0];
  tableValue.toggleRowSelection(current, false);
};
const save = () => {
  data.emitData.selectedUser = data.selected;
  data.emitData.selectedRole = data.selectedRole;
  emit('selectedEmit', data.emitData.selectedUser, data.emitData.selectedRole);
  data.visible = false;
};
getDeptTrees();
defineExpose({ open });
</script>
<style lang="scss">
//禁用table全选框
.el-table__header-wrapper .el-checkbox {
  display: none;
}
.nopadding {
  height: 290px;
}
//最外层
.net-user-select {
  display: flex;
  .net-user-select-left {
    flex: 2;

    .net-user-dept {
      height: 300px;
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      border: 1px solid var(--el-border-color-light);
      .net-user-dept-tree {
        flex: 1;
        border-right: 1px solid var(--el-border-color-light);
      }
      .net-user-user-tree {
        flex: 1;
        .net-user-userlist {
          height: 265px;
          overflow: auto;
        }
        footer {
          height: 36px;
          padding-top: 5px;
          border-top: 1px solid var(--el-border-color-light);
        }
      }
    }
  }
  .net-user-select-icon {
    display: flex;
    align-items: center;
    margin: 0 10px;
    i {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #ccc;
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      border-radius: 50%;
      color: #fff;
    }
  }
  .net-user-select-right {
    flex: 1;
    border: 1px solid var(--el-border-color-light);
    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px 5px 5px 15px;
      height: 38px;
      .name {
        display: flex;
        align-items: center;
        .el-avatar {
          background: #409eff;
          margin-right: 10px;
        }
      }
      .delete {
        display: none;
      }
    }
    li:hover {
      background: var(--el-color-primary-light-9);
    }
    li:hover .delete {
      display: inline-block;
    }
    // header {
    //   text-align: center;
    //   border-bottom: 1px solid var(--el-border-color-light);
    // }
    header {
      height: 43px;
      line-height: 43px;
      border-bottom: 1px solid var(--el-border-color-light);
      padding: 0 15px;
      font-size: 12px;
    }
  }
}
</style>
